<template>
  <div id="">
    <div class="topSelect">
      <a-range-picker
        v-model="times"
        show-time
        class="eachOne"
        @change="changeTime"
        format="YYYY-MM-DD HH:mm:ss"
        valueFormat="YYYY-MM-DD HH:mm:ss"
      />
      <a-select
        v-model="equipOption"
        @change="handleChangeEquip"
        :options="equipOptions"
        placeholder="选择设备"
        class="eachOne"
      ></a-select>
      <a-select
        v-model="echartType"
        @change="handleChangeType"
        :options="echartsTypes"
        placeholder="选择图标类型"
        class="eachOne"
        :disabled="!equipOption"
      ></a-select>
      <a-select
        v-model="dataValue"
        mode="multiple"
        @change="handleChangeData"
        :options="valueData"
        placeholder="选择值数据"
        class="eachOne"
        :disabled="!equipOption || !echartType"
      ></a-select>
      <a-button type="primary" @click="getEChartsData()">查询</a-button>
    </div>
    <div id="echartsMain"></div>
  </div>
</template>
  
  <script>
export default {
  props: {
    equipList: {},
  },
  data() {
    return {
      equipOptions: [], // 设备
      equipOption: "",
      equipOptionValue: "",
      echartsTypes: [
        { label: "气囊压力", value: "1" },
        { label: "位移", value: "2" },
        { label: "其他数据", value: "3" },
        { label: "纵角", value: "4" },
      ], // 图标类型
      echartType: "",
      valueData: [], // 值数据
      dataValue: [],
      type: "1",
      times: [],
      echartData: null,
      option: {
        textStyle: {
          color: "#fff",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          data: [],
        },
        grid: {},
        dataZoom: [
          {
            type: "slider",
          },
        ],
        toolbox: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
    };
  },
  created() {
    this.getEquipOptions();
  },
  mounted() {
    this.getChart();
  },
  beforeDestroy() {},
  methods: {
    // 获取设备下拉框
    getEquipOptions() {
      this.$axios.get("/modbus/equip/options", {}).then((res) => {
        if (res.code == 200) {
          res.data.map((i) => {
            i.label = i.name;
            i.value = i.id;
          });
          this.equipOptions = res.data;
        }
      });
    },
    handleChange() {
      let url;
      if (this.type == "1") {
        // 气囊
        url = "/modbus/equip/pots?equipId=";
      }
      if (this.type == "2") {
        // 位移
        url = "/modbus/equip/displaces?equipId=";
      }
      if (this.type == "3") {
        // 其他数据
        url = "/modbus/equip/others?equipId=";
      }
      if (this.type == "4") {
        // 纵角
        url = "/modbus/equip/ver/degrees?equipId=";
      }
      this.$axios.get(url + this.equipOptionValue, {}).then((res) => {
        if (res.code == 200) {
          res.data.map((i) => {
            i.label = i.name;
            i.value = i.id;
          });
          this.valueData = res.data;
        }
      });
    },
    handleChangeEquip(e) {
      this.equipOptionValue = e;
      this.dataValue = [];
      this.handleChange();
    },
    handleChangeType(e) {
      this.type = e;
      this.dataValue = [];
      this.handleChange();
    },
    handleChangeData(e, v) {
      console.log("---选择1", e, v);
    },
    changeTime(e) {
      console.log(e, "---改变时间");
    },
    getEChartsData() {
      let params = {
        equipId: this.equipOptionValue,
        indexes: this.dataValue.join(","),
        beginTime: this.times[0],
        endTime: this.times[1],
      };
      this.$axios.get("/modbus/data/history/data", { params }).then((res) => {
        if (res.code == 200) {
          this.option.series = [];
          this.option.xAxis.data = res.data.xaxisData;
          let arr = [];
          this.valueData.forEach((i) => {
            this.dataValue.forEach((v) => {
              if (i.value == v) {
                arr.push(i.name);
              }
            });
          });
          this.option.legend.data = arr;
          res.data.seriesData.forEach((i, x) => {
            let obj = { type: "line", data: [], name: "" };
            obj.data = i;
            obj.name = arr[x];
            this.option.series.push(obj);
          });
          console.log("option----", this.option.series);
          this.getChart();
        }
      });
    },
    getChart() {
      this.chartBox = this.$echarts.init(
        document.getElementById("echartsMain")
      );
      this.chartBox.clear(); // 清空整个echarts实例
      this.chartBox.setOption(this.option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
  },
};
</script>
  
<style lang="scss" scoped>
.topSelect {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  margin-bottom: 20px;
  .eachOne {
    width: 23%;
  }
}
#echartsMain {
  width: 100%;
  height: 700px;
  margin: 0 auto;
}
</style>
<style>
.topSelect .ant-input,
.topSelect .ant-calendar-range-picker-separator {
  color: #fff !important;
}
</style>
